<template>
  <div class="energy-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <div class="title-box">用能对比</div>
      <dv-loading v-if="loading"></dv-loading>
      <template v-else>
        <section class="top-main">
          <template v-if="isWater">
            <div class="energy-conservation">
              <div class="title-little-box">总能耗对比</div>
            </div>
            <div class="equipment-operation">
              <div class="title-little-box">单位能耗</div>
            </div>
          </template>
          <template v-else>
            <div class="water-conservation">
              <div class="title-little-box">用水对比</div>
            </div>
          </template>
        </section>

        <section class="center-main">
          <template v-if="isWater">
            <div class="energy-analysis panel1">
              <div class="inner1">
                <Vechart :options="coplineData"></Vechart>
              </div>
            </div>
            <div class="report-table panel1">
              <div class="inner1 options-select">
                <div class="option">
                  <Vechart :options="electbarData"></Vechart>
                </div>
                <div class="option-check">
                  <div
                    class="unit"
                    @click="checkInfo('area')"
                    :class="{ 'check-effect': slectTag === 'area' }"
                  >
                    单位建筑面积能耗
                  </div>
                  <div
                    class="unit"
                    @click="checkInfo('air')"
                    :class="{ 'check-effect': slectTag === 'air' }"
                  >
                    单位空调面积能耗
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="water-analysis panel1">
              <div class="inner1">
                <Vechart :options="waterlineData"></Vechart>
              </div>
            </div>
          </template>
        </section>

        <section class="bottom-main">
          <div class="consumption-today">
            <div
              @click="selectStnames(item.dockingCode)"
              class="list-stname-item"
              :class="{ 'check-border': !item.isCheck }"
              v-for="(item, index) in stNameList"
              :key="index"
            >
              {{ item.stationName }}
            </div>
          </div>
          <div class="date_select">
            <div class="select-title">
              <el-select
                v-model="value2"
                placeholder="请选择"
                @change="yearChange1"
                :disabled="isbutton"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-select
                :disabled="isbutton"
                v-model="value"
                placeholder="请选择"
                @change="yearChange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>

            <template v-if="isYear">
              <el-date-picker
                :disabled="isbutton"
                v-model="value1"
                class="date-picker"
                :type="dateType"
                :value-format="dateFormat"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </template>

            <template v-else>
              <div class="year-select">
                <div class="start-year">
                  <el-date-picker
                    :disabled="isbutton"
                    v-model="startYear"
                    type="year"
                    placeholder="选择年"
                    value-format="yyyy"
                    style="color: #28c2ff"
                  ></el-date-picker>
                </div>
                <div class="to-year">至</div>
                <div class="end-year">
                  <el-date-picker
                    :disabled="isbutton"
                    v-model="endYear"
                    type="year"
                    placeholder="选择年"
                    value-format="yyyy"
                    style="color: #28c2ff"
                  ></el-date-picker>
                </div>
              </div>
            </template>

            <el-button class="confirm_select" @click="confirmQuery"
              >对比</el-button
            >
          </div>
        </section>
      </template>
    </div>
  </div>
</template>
<script>
import {
  searchStationValues,
  searchAllStations,
  searchPerStationValues,
  searchStationWaterValues,
} from "../../api/base8090.js";
import copline from "./pageJson/copline.json";
import electbar from "./pageJson/electbar.json";
import waterline from "./pageJson/waterline.json";
import Vechart from "../../components/charts/Vcharts";
import { mapGetters, mapState } from "vuex";
import { getDateArea } from "../../utils/mytime.js";
export default {
  components: {
    Vechart,
  },
  data() {
    return {
      loading: true,
      timer: null,
      isWater: false,
      isYear: true,
      //限制不能选择当前时间之后的时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime();
          if (maxDate) {
            this.choiceDate = "";
          }
        },
        disabledDate: (time) => {
          if (this.choiceDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.choiceDate - one;
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() > Date.now() - 8.64e7 ||
              time.getTime() < minTime ||
              time.getTime() > maxTime
            );
          } else {
            return time.getTime() > Date.now() - 8.64e7;
          }
        },
      },
      options: [
        {
          value: "D",
          label: "日",
        },
        {
          value: "M",
          label: "月",
        },
        {
          value: "Y",
          label: "年",
        },
      ],
      value: "D",
      options1: [
        {
          value: "水",
          label: "水",
        },
        {
          value: "电",
          label: "电",
        },
      ],
      value2: "水",
      dateType: "daterange",
      dateFormat: "yyyy-MM-dd",
      slectTag: "area",
      isCheck: false,
      startYear: "",
      endYear: "",
      stNameList: [],
      colors: [
        "#EE6B86",
        "#E99114",
        "#E9EA8B",
        "#29DAD1",
        "#39A8FF",
        "#39E8CF",
        "#89C8EF",
        "#97DAF8",
        "#E99114",
        "#84BFDD",
        "#97DAF8",
        "#64BFDD",
        "#27CAF8",
        "#E99114",
        "#84BFDD",
        "#3ba30a",
        "#4dbd69",
        "#d3467c",
        "#c746d3",
        "#cdda5c",
        "#1ab314",
        "#1bc7d3",
        "#ac3d0a",
        "#7328ff",
      ],
      electbar: electbar,
      copline: copline,
      waterline: waterline,
      value1: getDateArea(25),
      coplineDatas: {},
      electbarDatas: {},
      queryParmas: {
        flag: "D",
        stationCodeList: ["S01", "S02", "S03"],
        startTime: getDateArea(25)[0],
        endTime: getDateArea(25)[1],
      },
      querySwitchParmas: {
        flag: "D",
        stationCodeList: ["S01", "S02", "S03"],
        startTime: getDateArea(25)[0],
        endTime: getDateArea(25)[1],
        switchFlag: 0,
      },
      waterCompareData: {},
      loading1: false,
      loading2: false,
      loading3: false,
      isbutton: true,
    };
  },
  created() {
    this.timer = setInterval(() => {
      if (document.readyState === "complete") {
        this.loading = false;
        window.clearInterval(this.timer);
      }
    }, 1000);
    this.initData();
    this.initStationList();
    this.searchStationWaterValuesApi();
  },
  methods: {
    initData() {
      this.isbutton = true;
      this.loading2 = true;
      this.loading3 = true;
      searchStationValues(this.queryParmas).then((res) => {
        this.loading2 = false;
        this.isbutton = !this.loading2 && !this.loading3 ? false : true;

        this.coplineDatas = res.data;
        // console.log("车站的能耗对比", res.data);
      });
      searchPerStationValues(this.querySwitchParmas).then((res) => {
        this.loading3 = false;
        this.isbutton = !this.loading2 && !this.loading3 ? false : true;

        this.electbarDatas = res.data;
        // console.log("车站的面积能耗对比", res.data);
      });
      // searchStationWaterValues(this.queryParmas).then(res => {
      //   this.waterCompareData = res.data;
      //   // console.log("水对比", res.data);
      // });
    },
    searchStationWaterValuesApi() {
      this.isbutton = true;
      this.loading1 = true;
      searchStationWaterValues(this.queryParmas).then((res) => {
        this.loading1 = false;
        this.isbutton = false;
        this.waterCompareData = res.data;
        // console.log("水对比", res.data);
      });
    },
    initStationList() {
      searchAllStations().then((res) => {
        this.stNameList = res.data;
      });
    },
    yearChange() {
      if (this.value === "D") {
        this.dateType = "daterange";
        this.dateFormat = "yyyy-MM-dd";
        this.queryParmas.flag = "D";
        this.querySwitchParmas.flag = "D";
        this.isYear = true;
      } else if (this.value === "M") {
        this.dateType = "monthrange";
        this.dateFormat = "yyyy-MM";
        this.queryParmas.flag = "M";
        this.querySwitchParmas.flag = "M";
        this.isYear = true;
      } else {
        this.isYear = false;
        this.dateType = "year";
        this.queryParmas.flag = "Y";
        this.querySwitchParmas.flag = "Y";
      }
    },
    yearChange1() {
      if (this.value2 === "水") {
        this.isWater = false;
      } else {
        this.isWater = true;
      }
    },
    //车站选中状态切换
    selectStnames(stName) {
      this.stNameList.map((i) => {
        if (i.dockingCode === stName) {
          i.isCheck = !i.isCheck;
        }
      });
    },
    //对比选中的车站
    confirmQuery() {
      let list = [];
      this.stNameList.map((item) => {
        if (item.isCheck) {
          list.push(item.dockingCode);
        }
      });
      if (list.length > 5) {
        return this.$message.warning("车站最多选择5个站点！");
      }
      this.queryParmas.stationCodeList = list;
      this.querySwitchParmas.stationCodeList = list;

      if (!this.isYear) {
        if (!this.startYear || !this.endYear) {
          return this.$message.warning("日期不能为空！");
        }
        if (this.startYear > this.endYear) {
          return this.$message.warning("日期选择错误！");
        }
        this.queryParmas.startTime = this.startYear;
        this.queryParmas.endTime = this.endYear;
        this.querySwitchParmas.startTime = this.startYear;
        this.querySwitchParmas.endTime = this.endYear;
      } else {
        if (!this.value1) {
          return this.$message.warning("日期不能为空！");
        }
        if (list.length < 2) {
          return this.$message.warning("请选择至少两个车站！");
        }
        this.queryParmas.startTime = this.value1[0];
        this.queryParmas.endTime = this.value1[1];
        this.querySwitchParmas.startTime = this.value1[0];
        this.querySwitchParmas.endTime = this.value1[1];
      }
      // this.queryParmas.list = list;
      // this.queryParmas.startTime = this.value1[0];
      // this.queryParmas.endTime = this.value1[1];
      // this.querySwitchParmas.list = list;
      // this.querySwitchParmas.startTime = this.value1[0];
      // this.querySwitchParmas.endTime = this.value1[1];

      if (this.isWater) {
        this.initData();
      } else {
        this.searchStationWaterValuesApi();
      }
      // this.initData();
    },
    checkInfo(type) {
      this.loading3 = true;
      this.slectTag = type;
      if (type === "area") {
        this.querySwitchParmas.switchFlag = 0;
      } else {
        this.querySwitchParmas.switchFlag = 1;
      }
      searchPerStationValues(this.querySwitchParmas).then((res) => {
        this.loading3 = false;
        this.electbarDatas = res.data;
        // console.log("车站的面积能耗对比", res.data);
      });
    },
  },
  computed: {
    ...mapState(["stationList"]),
    waterlineData() {
      let datas = this.waterCompareData;

      // return this.copline;
      if (Object.keys(datas).length && datas.time.length) {
        let { stnames, values } = datas;
        let color = this.colors.slice(0, stnames.length + 1);
        let series = [];
        for (let i = 0; i < stnames.length; i++) {
          series.push({
            name: stnames[i],
            type: "line",
            smooth: true,
            data: values[i],
          });
        }
        return {
          ...this.waterline,
          color,
          legend: {
            ...this.waterline.legend,
            data: stnames,
          },
          xAxis: [
            {
              ...this.waterline.xAxis[0],
              axisLabel: {
                ...this.waterline.xAxis[0].axisLabel,
                // formatter: function(params, index) {
                //   return params.slice(5, 10);
                // }
              },
              data: datas.time,
            },
          ],
          series,
        };
      } else {
        return this.waterline;
      }
    },
    //总能耗对比图表渲染
    coplineData() {
      let datas = this.coplineDatas;

      // return this.copline;
      if (Object.keys(datas).length && datas.time.length) {
        let { stnames, values } = datas;
        let color = this.colors.slice(0, stnames.length + 1);
        let series = [];
        for (let i = 0; i < stnames.length; i++) {
          series.push({
            name: stnames[i],
            type: "line",
            smooth: true,
            data: values[i],
          });
        }
        return {
          ...this.copline,
          color,
          legend: {
            ...this.copline.legend,
            data: stnames,
          },
          xAxis: [
            {
              ...this.copline.xAxis[0],
              axisLabel: {
                ...this.copline.xAxis[0].axisLabel,
                // formatter: function(params, index) {
                //   return params.slice(5, 10);
                // }
              },
              data: datas.time,
            },
          ],
          series,
        };
      } else {
        return this.copline;
      }
    },
    //面积能耗对比
    electbarData() {
      let datas = this.electbarDatas;
      // return this.electbar;
      if (Object.keys(datas).length && datas.stnames.length) {
        let { stnames, values } = datas;
        let color = this.colors.slice(0, stnames.length + 1);
        let series = [];
        for (let i = 0; i < stnames.length; i++) {
          series.push({
            name: stnames[i],
            type: "line",
            smooth: true,
            data: values[i],
          });
        }
        return {
          ...this.electbar,
          color,
          legend: {
            ...this.electbar.legend,
            data: stnames,
          },
          xAxis: [
            {
              ...this.electbar.xAxis[0],
              axisLabel: {
                ...this.electbar.xAxis[0].axisLabel,
                // formatter: function(params, index) {
                //   return params.slice(5, 10);
                // }
              },
              data: datas.time,
            },
          ],
          series,
        };
      } else {
        return this.electbar;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.energy-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    .title-box {
      position: absolute;
      font-weight: bold;
      top: 10px;
      left: 0;
      font-size: 22px;
      color: #ffffff;
      text-align: center;
      width: 220px;
      height: 44px;
      line-height: 44px;
      background: url("../../assets/img/ti.png") no-repeat center;
      background-size: cover;
    }

    .top-main {
      width: 100%;
      height: 8%;
      display: flex;
      .energy-conservation {
        width: 50%;
        height: 100%;
      }
      .equipment-operation {
        width: 50%;
        height: 100%;
      }
      .water-conservation {
        width: 100%;
        height: 100%;
      }
    }
    .center-main {
      width: 100%;
      height: 62%;
      display: flex;
      justify-content: space-around;
      .energy-analysis {
        width: 47%;
        height: 100%;
      }
      .report-table {
        width: 47%;
        height: 100%;
        .options-select {
          // width: 100%;
          // height: 100%;
          .option {
            width: 100%;
            height: 90%;
          }
          .option-check {
            width: 100%;
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;

            user-select: none;
            .unit {
              cursor: pointer;
              margin: 0 2px;
              width: 150px;
              height: 44px;
              line-height: 44px;
              text-align: center;
              font-size: 16px;
              color: #28c2ff;
              border-radius: 10px;
              background-color: #0a73b1;
            }
            .check-effect {
              font-weight: bold;
              color: #ffffff;
              background-color: #2b98ff;
            }
          }
        }
      }
      .water-analysis {
        width: 90%;
        height: 100%;
        margin: 0 auto;
      }
    }
    .bottom-main {
      width: 100%;
      height: 30%;
      background: url("../../assets/img/vv.png") no-repeat center center;
      background-size: 100% 100%;
      // display: flex;
      .consumption-today {
        width: 96%;
        height: 70%;
        margin: 0 auto;
        display: flex;
        padding: 0 40px;
        // justify-content: center;
        align-items: center;
        overflow: hidden;
        overflow-x: auto;
        .list-stname-item {
          cursor: pointer;
          user-select: none;
          letter-spacing: 2px;
          writing-mode: vertical-lr;
          text-align: center;
          margin: 0 12px;
          line-height: 40px;
          max-width: 44px;
          height: 144px;
          border: 2px solid #0a73b1;
          border-radius: 10px;
          font-size: 16px;
          font-weight: bold;
          color: #0a73b1;
        }
        .check-border {
          border: 2px solid transparent;
        }
      }
      .date_select {
        width: 100%;
        height: 80px;
        // background-color: #249113;
        display: flex;
        justify-content: center;
        align-items: center;
        .select-title {
          margin-right: 18px;
          width: 164px;
          height: 42px;
          display: flex;
          justify-content: space-around;
          // background-color: #fff;
          align-items: center;
          .el-select {
            width: 68px;
          }
        }
        .time_text {
          margin: 0 40px;
          font-size: 18px;
          color: #28c2ff;
        }
        .date-picker {
          // width: 4.75rem;
          height: 44px;
          background-color: #091c37;
          border: 1px solid #0a73b1;
          color: #28c2ff !important;
          /deep/ .el-range-input {
            background-color: #091c37;
            color: #28c2ff;
          }
        }
        .confirm_select {
          cursor: pointer;
          margin: 0 40px;
          width: 88px;
          height: 44px;
          background: #091c37;
          border-radius: 6px;
          text-align: center;
          // line-height: 44px;
          font-size: 16px;
          font-weight: bold;
          color: #28c2ff;
          border: 1px solid #0a73b1;
        }
        .year-select {
          width: 304px;
          height: 44px;
          border-radius: 6px;
          background-color: #091c37;
          border: 1px solid #0a73b1;
          display: flex;
          justify-content: center;
          text-align: center;
          align-items: center;
          color: #28c2ff;
          .start-year {
            /deep/ .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
              width: 120px;
              height: 40px;
              background-color: #091c37 !important;
              border: none !important;
              color: #28c2ff !important;
            }
            /deep/ .el-input__inner {
              background-color: #091c37;
              border: none;
              border-radius: 6px;
              color: #28c2ff !important;
            }
          }
          .to-year {
            width: 60px;
          }
          .end-year {
            /deep/ .el-date-editor.el-input,
            .el-date-editor.el-input__inner {
              width: 120px;
              height: 40px;
              background-color: #091c37 !important;
              border: none !important;
            }
            /deep/ .el-input__inner {
              background-color: #091c37;
              border: none;
              border-radius: 6px;
              color: #28c2ff !important;
            }
          }
        }
      }
    }
  }

  .title-little-box {
    width: 680px;
    font-size: 28px;
  }
}
</style>
